<template>
  <div class="home-views">
    <!-- 导航栏 -->
    <van-nav-bar fixed>
      <!-- logo -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 搜索 -->
      <template #right>
        <van-button to="/searchIndex" round icon="search" type="primary" size="small">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 频道组件 -->
    <van-tabs v-model="activeIndex">
      <van-tab v-for="item in channelList" :title="item.name" :key="item.id">
        <div class="scroll-wrapper">
          <ArticleList :my-channel="item" />
        </div>
      </van-tab>
    </van-tabs>
    <!-- 频道编辑点击按钮 -->
    <div class="bar-btn" @click="showActionSheet = true">
      <van-icon name="wap-nav" />
    </div>
    <!-- 动作面板，从下往上滑出 -->
    <van-action-sheet v-model="showActionSheet" get-container="body">
      <!-- 把选中的频道发送到子组件里 -->
      <channel-edit :my-channels="channelList" @channel-skip="channelSkip"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel'
// 引入文章列表组件
import ArticleList from './components/ArticleList'
// 引入编辑频道组件
import ChannelEdit from './components/ChannelEdit'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  name: 'HomeIndex',
  data () {
    return {
      channelList: [], // 选中的频道
      showActionSheet: false, // 控制动作面板是否显示
      activeIndex: null // 频道跳转项
    }
  },
  methods: {
    // 获取频道列表
    hGetChannels () {
      getChannels().then(res => {
        console.log(res)
        this.channelList = res.data.data.channels
      })
    },
    // 接收子组件传递过来的频道索引值，动画面板跳频道转，并且关闭动画面板
    channelSkip (index) {
      this.showActionSheet = false
      this.activeIndex = index
    }
  },
  mounted () {
    this.hGetChannels()
  }
}
</script>

<style lang="less" scoped>
.home-views {
  .logo {
    width: 100px;
    height: 30px;
    background: url("../../assets/img/logo.png") no-repeat;
    background-size: cover;
  }
  // 搜索按钮
  .van-button {
    width: 80px;
    color: #333;
    background-color: #fff;
    border: 1px solid #fff;
  }
  // 图标颜色
  /deep/.van-icon {
    color: #333;
  }
  // 频道
  /deep/ .van-tabs {
    position: fixed;
    width: 100%;
    top: 45px;
  }
  // 滑块下划线颜色
  /deep/.van-tabs__line {
    background-color: #3196fa;
  }
  // 专门为文章列表区域腾出一块空间
  /deep/.van-tabs__content {
    position: fixed;
    top: 96px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
  }
  // 为更多按钮让出位置
  /deep/.van-tabs__nav{
    width:calc(100vw - 50px);
  }
  // 频道设置按钮
  .bar-btn {
    position: fixed;
    top: 57px;
    right: 5px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1;
    .van-icon-wap-nav {
      font-size: 20px;
    }
  }
}
</style>
